<template>
  <div class="" style="">
    <div class="wscn-http404-container" v-if="!isShow">
      <div class="wscn-http404">
        <div class="pic-404" @click="transformStatus">
          <img
            class="pic-404__parent"
            src="@/assets/404_images/404.png"
            alt="404"
          />
          <img
            class="pic-404__child left"
            src="@/assets/404_images/404_cloud.png"
            alt="404"
          />
          <img
            class="pic-404__child mid"
            src="@/assets/404_images/404_cloud.png"
            alt="404"
          />
          <img
            class="pic-404__child right"
            src="@/assets/404_images/404_cloud.png"
            alt="404"
          />
        </div>
        <div class="bullshit">
          <div class="bullshit__oops">404错误!</div>
          <div class="bullshit__headline">
            {{ message }}
          </div>
          <div class="bullshit__info">
            对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
          </div>
          <router-link to="/" class="bullshit__return-home">
            返回首页
          </router-link>
        </div>
      </div>
    </div>
    <div class="small-container" v-else>
      <div class="" style="margin: 20px">
        <el-button type="primary" @click="chosedDiv(0)">Table</el-button>
        <el-button type="primary" @click="chosedDiv(1)">Form</el-button>
        <el-button type="primary" @click="addmethod">添加数据</el-button>
        <el-button type="primary" @click="transformData">Table转Form</el-button>
        <el-button type="primary" @click="printLog">打印</el-button>
        <el-tag style="margin-left: 20px" type="success">
          一共创建了{{ table_totalData.length }}个
        </el-tag>
      </div>
      <el-table :data="form_totalData" style="width: 100%" v-if="showTable">
        <el-table-column prop="name" label="命名(英文)" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" style="width: 100%"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="scopeName" label="参数名字(中文)">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.scopeName"
              style="width: 100%"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="isRequire" label="是否是必须参数">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isRequire" placeholder="请选择">
              <el-option
                v-for="item in arrYesOrNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="inputTool" label="输入框类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.inputTool" placeholder="请选择">
              <el-option
                v-for="item in form_arrinputTool"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="emType" label="下拉菜单时枚举类型">
          <template slot-scope="scope">
            <el-input v-model="scope.row.emType" style="width: 100%"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <el-table :data="table_totalData" style="width: 100%" v-if="!showTable">
        <el-table-column prop="name" label="命名(英文)" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" style="width: 100%"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="scopeName" label="参数名字(中文)">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.scopeName"
              style="width: 100%"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="emType" label="搜索框枚举类型">
          <template slot-scope="scope">
            <el-input v-model="scope.row.emType" style="width: 100%"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="minWidthValue" label="最小宽度">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.minWidthValue"
              style="width: 100%"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="isSearch" label="是否搜索">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isSearch" placeholder="请选择">
              <el-option
                v-for="item in arrYesOrNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="alignText" label="文本是否居中">
          <template slot-scope="scope">
            <el-select v-model="scope.row.alignText" placeholder="请选择">
              <el-option
                v-for="item in table_arrTextAlign"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="searchTool" label="搜索框类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.searchTool" placeholder="请选择">
              <el-option
                v-for="item in table_arrSelectType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="sortable" label="是否排序">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sortable" placeholder="请选择">
              <el-option
                v-for="item in arrYesOrNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="isLink" label="是否可点击">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isLink" placeholder="请选择">
              <el-option
                v-for="item in arrYesOrNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>

      <span
        class=""
        style=""
        v-if="form_totalData && form_totalData.length != 0"
      >
        {{ form_totalData.length }}
      </span>

      <div
        v-if="printFirst"
        class=""
        style="width: 100%; border: 1px solid blue; padding: 20px"
      >
        {{ JSON.stringify(printFirst) }}
      </div>
      <div
        v-if="printSecond"
        class=""
        style="width: 100%; border: 1px solid red; padding: 20px"
      >
        {{ JSON.stringify(printSecond) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Page404',
  data() {
    return {
      isShow: false,
      showTable: false,

      table_totalData: [],
      table_arrSelectType: [],
      table_arrTextAlign: [],

      form_totalData: [],
      form_arrinputTool: [],

      arrYesOrNo: [],

      printFirst: null,
      printSecond: null
    };
  },
  computed: {
    message() {
      return '找不到网页！';
    }
  },
  mounted() {
    this.table_arrSelectType = [
      { label: '输入框', value: 'input' },
      { label: '选择框', value: 'select' }
    ];

    this.table_arrTextAlign = [
      { label: '左侧', value: 'left' },
      { label: '居中', value: 'center' }
    ];
    this.arrYesOrNo = [
      { label: '是', value: '1' },
      { label: '否', value: '0' }
    ];
    //
    this.form_arrinputTool = [
      { label: '选择框', value: 'select' },
      { label: '输入框', value: 'input' },
      { label: '输入域', value: 'textarea' },
      { label: '数字输入框', value: 'number' },
      { label: '日期选择器', value: 'date-picker' },
      { label: '时间选择器', value: 'time-picker' },
      { label: '上传多个文件', value: 'CFileUploadList' },
      { label: '上传单个文件', value: 'CFileUpload' },
      { label: '上传多个图片', value: 'imgListUpload' },
      { label: '上传单个图片', value: 'singleImgUpload' },
      { label: '选择器', value: 'switch' }
    ];
  },
  methods: {
    transformStatus() {
      this.isShow = true;
    },
    transformData() {
      this.showTable = true;
      this.form_totalData = [];
      if (this.table_totalData && this.table_totalData.length >= 1) {
        for (var indez = 0; indez < this.table_totalData.length; indez++) {
          let forTmp = this.table_totalData[indez];
          this.form_totalData.push({
            name: forTmp.name, //命名
            isRequire: '1', //是否是必须参数
            scopeName: forTmp.scopeName, //参数名字
            inputTool: forTmp.searchTool, //输入框类型
            emType: '' //枚举类型
          });
        }
      }
    },
    addmethod() {
      if (this.showTable) {
        this.addFormMethod();
      } else {
        this.addTableMethod();
      }
    },
    addTableMethod() {
      let mmm = 'qwertyuiopasdfghjklzxcvbnm';
      let searchString =
        mmm.substr(this.table_totalData.length, 1) +
        mmm.substr(this.table_totalData.length, 1) +
        mmm.substr(this.table_totalData.length, 1);
      this.table_totalData.push({
        name: searchString, //命名
        scopeName: '', //参数名字
        emType: '', //枚举类型
        minWidthValue: '100', //最小宽度
        alignText: 'left', //文本是否居中
        isSearch: '0', //是否搜索
        searchTool: '', //搜索框类型
        sortable: '0', //是否排序
        isLink: '0' //是否可点击
      });
    },
    addFormMethod() {
      this.showTable = true;
      let mmm = 'qwertyuiopasdfghjklzxcvbnm';
      let searchString =
        'pro_' +
        mmm.substr(this.form_totalData.length, 1) +
        mmm.substr(this.form_totalData.length, 1) +
        mmm.substr(this.form_totalData.length, 1);

      this.form_totalData.push({
        name: searchString, //命名
        isRequire: '1', //是否是必须参数
        scopeName: '', //参数名字
        inputTool: 'input', //输入框类型
        emType: '' //枚举类型
      });
    },
    downLoadTable() {
      console.log(
        'this.table_totalData>-->:',
        JSON.stringify(this.table_totalData)
      );
      this.printFirst = this.table_totalData;
      let standDic = {};
      for (var indez = 0; indez < this.table_totalData.length; indez++) {
        let forTmp = this.table_totalData[indez];
        var modelDict = {};
        modelDict.label = forTmp.scopeName;
        if (forTmp.emType) {
          modelDict.dictKey = forTmp.emType;
        }
        if (forTmp.minWidthValue) {
          modelDict.minWidth = forTmp.minWidthValue;
        }
        if (forTmp.alignText) {
          modelDict.align = forTmp.alignText;
        }
        if (forTmp.isSearch == '1') {
          modelDict.filter = {
            label: forTmp.scopeName,
            placeholder:
              forTmp.searchTool == 'select'
                ? '请选择' + forTmp.scopeName
                : '请输入' + forTmp.scopeName,
            type: forTmp.searchTool
          };
        }
        if (forTmp.sortable == '1') {
          modelDict.sortable = true;
        }
        if (forTmp.isLink == '1') {
          modelDict.link = { type: 'primary', event: '' };
        }
        // arr.push(modelDict);
        standDic[forTmp.name] = modelDict;
      }
      console.log('arr>-->:', JSON.stringify(standDic));
      this.printSecond = standDic;
    },
    downLoadForm() {
      console.log(
        'this.form_totalData>-->:',
        JSON.stringify(this.form_totalData)
      );
      this.printFirst = this.form_totalData;
      let standDic = {};
      for (var indez = 0; indez < this.form_totalData.length; indez++) {
        let forTmp = this.form_totalData[indez];
        var modelDict = {};
        modelDict.label = forTmp.scopeName;
        if (forTmp.isRequire == '1') {
          modelDict.required = true;
        } else {
          modelDict.required = false;
        }
        modelDict.placeholder = '请输入' + forTmp.scopeName;
        modelDict.value = '';
        modelDict.clearable = true;
        modelDict.width = '100%';
        modelDict.rightGap = '10px';
        modelDict.type = forTmp.inputTool;
        switch (forTmp.inputTool) {
          case 'select':
            modelDict.placeholder = '请选择' + forTmp.scopeName;
            if (forTmp.emType.length != 0) {
              modelDict.dictKey = forTmp.emType;
            } else {
              modelDict.options = [];
            }
            break;
          case 'input':
            modelDict.maxlength = 30;
            break;
          case 'textarea':
            modelDict.maxlength = 200;
            break;
          case 'number':
            modelDict.showControls = false;
            modelDict.value = 0;
            modelDict.min = 0;
            modelDict.max = 100;
            break;
          case 'date-picker':
            modelDict.placeholder = '请选择' + forTmp.scopeName;
            modelDict.valueFormat = 'yyyy-MM-dd';
            break;
          // case 'time-picker':
          // modelDict.placeholder = '请选择' + forTmp.scopeName;
          // modelDict.valueFormat = 'yyyy-MM-dd';
          // break;
          case 'CFileUploadList':
            modelDict.tipLabel = '';
            modelDict.actionUrl = '';
            break;
          case 'CFileUpload':
            modelDict.tipLabel = '';
            modelDict.actionUrl = '';
            break;
          case 'imgListUpload':
          case 'singleImgUpload':
            // modelDict.tipLabel = '';
            modelDict.actionUrl = '';
            break;
          case 'switch':
            modelDict.value = 0;
            modelDict.text = '开关';
            break;
          default:
            break;
        }

        /* if (forTmp.sortable == '1') {
          modelDict.sortable = true;
        } */

        standDic[forTmp.name] = modelDict;
      }
      console.log('arr>-->:', JSON.stringify(standDic));
      this.printSecond = standDic;
    },
    printLog() {
      if (this.showTable) {
        this.downLoadForm();
      } else {
        this.downLoadTable();
      }
    },
    chosedDiv(index) {
      if (index == 0) {
        this.showTable = false;
        this.table_totalData = [];
      } else {
        this.showTable = true;
        this.form_totalData = [];
      }
      this.printFirst = null;
      this.printSecond = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.wscn-http404-container {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 40%;
  left: 50%;
}
.wscn-http404 {
  position: relative;
  width: 1200px;
  padding: 0 50px;
  overflow: hidden;

  .pic-404 {
    position: relative;
    float: left;
    width: 600px;
    overflow: hidden;
    &__parent {
      width: 100%;
    }
    &__child {
      position: absolute;
      &.left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      &.mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
      }
      &.right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      @keyframes cloudLeft {
        0% {
          top: 17px;
          left: 220px;
          opacity: 0;
        }
        20% {
          top: 33px;
          left: 188px;
          opacity: 1;
        }
        80% {
          top: 81px;
          left: 92px;
          opacity: 1;
        }
        100% {
          top: 97px;
          left: 60px;
          opacity: 0;
        }
      }
      @keyframes cloudMid {
        0% {
          top: 10px;
          left: 420px;
          opacity: 0;
        }
        20% {
          top: 40px;
          left: 360px;
          opacity: 1;
        }
        70% {
          top: 130px;
          left: 180px;
          opacity: 1;
        }
        100% {
          top: 160px;
          left: 120px;
          opacity: 0;
        }
      }
      @keyframes cloudRight {
        0% {
          top: 100px;
          left: 500px;
          opacity: 0;
        }
        20% {
          top: 120px;
          left: 460px;
          opacity: 1;
        }
        80% {
          top: 180px;
          left: 340px;
          opacity: 1;
        }
        100% {
          top: 200px;
          left: 300px;
          opacity: 0;
        }
      }
    }
  }
  .bullshit {
    position: relative;
    float: left;
    width: 300px;
    padding: 30px 0;
    overflow: hidden;
    &__oops {
      font-size: 32px;
      font-weight: bold;
      line-height: 40px;
      color: #1482f0;
      opacity: 0;
      margin-bottom: 20px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
    &__headline {
      font-size: 20px;
      line-height: 24px;
      color: #222;
      font-weight: bold;
      opacity: 0;
      margin-bottom: 10px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.1s;
      animation-fill-mode: forwards;
    }
    &__info {
      font-size: 13px;
      line-height: 21px;
      color: grey;
      opacity: 0;
      margin-bottom: 30px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    &__return-home {
      display: block;
      float: left;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      color: #ffffff;
      opacity: 0;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.3s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp {
      0% {
        transform: translateY(60px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>
